<template>
	<view class="page">
		<uni-nav-bar background-color="#00a9ff" title="个人信息" color="white" :fixed="true"
				 right-icon="checkmarkempty" @clickRight="save" statusBar="true"/>
		
		<view class="center-container">
			<image src="../../static/logo.png" class="picture" @click="gotoLogin"></image>
			<text style="color:rgba(162, 140, 156, 0.7) ;" @click="gotoLogin">账号：{{userID}}</text>
		</view>
	
		<uni-card :isShadow="true" spacing="0px" padding="0px" margin="7px">
			<view class="item">
				<view class="left">昵称</view>
				<text class="right" @click="modifyName">{{userName}}</text>	
			</view>
			<view  class="item">
				<view class="left">性别</view>
				<picker :range="gender" range-key="gname" @change="bindGender" class="right">				
					{{gender[index].gname}}
				</picker>
			</view>
			
			<view  class="item">
				<view class="left">生日</view>
				<picker mode="date" @change="bindDate" class="right">				
					{{date}}
				</picker>
			</view>

			<view  class="item">
				<view class="left">地址</view>
				<view @tap="showCityPicker" class="right">{{cityName}}</view>	
				<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
				 @onChange="onChange" @onCancel="onCancel" @onConfirm="onConfirm">
				 </mpvue-city-picker>
			</view>	
			
			<view class="item">
				<view class="left">电话</view>
				<text class="right" @click="modifyPhone">{{phoneNumber}}</text>					
			</view>								
		</uni-card>	
		
		<view>
			<uni-popup ref="inputDialogueChangeName" type="dialog" :animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="修改昵称" 
					placeholder="请输入昵称" @confirm="nameConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="inputDialogueChangePhone" type="dialog" :animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="修改电话" 
					placeholder="请输入电话号码" @confirm="phoneConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import date from '../../common/date.js'
	export default {
		data() {
			/*const currentDate = this.getDate({
				format: true,
				})*/
			const currentDate = date.getDate()
			return {
				userID:this.$userID,
				userName:'知心',
				phoneNumber:'13012345678',
				pickerValueDefault: [0, 0, 0],
				date:currentDate,
				index:0,
				cityName:'选择地区',
				gender:[
					{gname:'男'},
					{gname:'女'},
					{gname:'其他'}
				],
				show: false,
                addressData: {
                    name: '',
                    phone: '',
                    address: '',
                    moreAddres: '',
                    isdefult: 0
                },
                isShow: true
			}
		},
		
		components: {
			mpvueCityPicker
		},
		/*computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },*/
		methods: {
			gotoLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			bindGender(e){
				this.index = e.detail.value;
			},			
			bindDate: function(e) {
			    this.date = e.detail.value;
				let age = date.getFullYear();
			},
			/*getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},*/
			
			onchange(e) {
			    const value = e.detail.value
			},
			onnodeclick(node) {},
			
			showCityPicker() {
			    this.$refs.mpvueCityPicker.show();
			},
			onChange(e) {
			    console.log(e);
			},
			onCancel(e) {
			    console.log(e);
			},
			onConfirm(e) {
			    this.cityName = e.label;
			},			
			openPicker() {
                console.log('执行打开地址选择器')
                this.show = true
            },
            onhideShow() {
                this.show = false
                console.log('执行了关闭地址选择器')
            },
            //选中省市区
            onsetCity(e) {
                let data = e.detail.target.dataset;
                let address = data.province + data.city + data.area;
                this.show = false
                this.addressData.address = address
            },
            switchChange(e) {
                this.setData({
                    checked: e.detail.value
                });
            },
			
			gologin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			modifyName(){
				this.$refs.inputDialogueChangeName.open();
			},
			nameConfirm(val){
				this.$userName = val;
				this.userName = val;
				this.$refs.inputDialogueChangeName.close();
			},
			modifyPhone(){
				this.$refs.inputDialogueChangePhone.open();
			},
			phoneConfirm(val){
				this.phoneNumber = val;
				this.$refs.inputDialogueChangePhone.close();
			},
			save(){
				//保存当前所有数据的修改
				uni.showToast({
					title:"保存成功！",
					icon:"success"
				})
			}
			

		}
	}
</script>

<style>	
	.item{
		line-height: 90rpx;
		display: flex;
		background-color: #ffffff38;
		font-size: 15px;
		border-bottom: solid 1px #efefef;		
	}	
	.left{
		width: 200rpx;
		margin-left: 30rpx;
		color: #000000;		
	}
	.right{
		width: 800rpx;
		margin-right: 30rpx;
		text-align: right;
		color: rgba(162, 140, 156, 0.7);
	}
	.picture{
		height: 200rpx;
		width: 200rpx;
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		border-radius: 100%;

	}
	.center-container{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 50rpx;
	}
</style>
